<template>
  <view class="container">
    <!-- 背景图片 + 标题 + 搜索框 -->
    <view class="header-background">
      <view class="nav-bar">
        <image class="back-icon" src="../../static/icons/back.png" @tap="goBack" />
        <text class="header-text">护理历史（{{ customerName }}）</text>
      </view>
      <view class="header-search">
        <view class="search-bar">
          <image class="search-icon" src="../../static/icons/search.png" />
          <input 
            class="search-input" 
            v-model="filters.projectName" 
            placeholder="按项目名称筛选"
            @confirm="onFilter"
          />
        </view>
      </view>
    </view>

    <!-- 护理记录列表 -->
    <scroll-view class="record-list" scroll-y>
      <view 
        v-for="item in records" 
        :key="item.careServiceId" 
        class="record-item"
      >
        <view class="record-info">
          <text class="proj-name">{{ item.projectName }}</text>
          <view class="meta-row">
            <text class="proj-code">{{ item.code }}</text>
            <text class="time">{{ formatDate(item.careStartTime) }}</text>
            <text class="count">数量：{{ item.careCount }}</text>
          </view>
        </view>
        <button class="btn-remove" @tap="removeRecord(item.careServiceId)">
          移除
        </button>
      </view>

      <!-- 空状态 -->
      <view v-if="records.length === 0" class="no-record">
        <text>暂无护理记录</text>
      </view>
    </scroll-view>

    <!-- 底部 TabBar -->
    <view class="tab-bar">
      <view
        class="tab-item"
        :class="{ active: currentTab === 'daily' }"
        @tap="switchTab('daily')"
      >
        <image
          :src="currentTab === 'daily' 
            ? '../../static/icons/home-active.png' 
            : '../../static/icons/home.png'"
        />
        <text>日常护理</text>
      </view>
      <view
        class="tab-item"
        :class="{ active: currentTab === 'history' }"
        @tap="switchTab('history')"
      >
        <image
          :src="currentTab === 'history' 
            ? '../../static/icons/history-active.png' 
            : '../../static/icons/history.png'"
        />
        <text>护理历史</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getCareRecordList } from "@/api/client";

export default {
  name: "CareHistory",
  data() {
    return {
      currentTab: 'history',
      customerId: null,
      customerName: '',
      filters: {
        name: "",
        gender: "",
        careLevel: null,
        projectName: "",
        page: 1,
        pageSize: 100
      },
      records: []
    };
  },
  async onLoad(options) {
    this.customerId = options.customerId;
    this.customerName = decodeURIComponent(options.customerName || "");
    this.filters.name = this.customerName;
    await this.fetchRecords();
  },
  methods: {
    async fetchRecords() {
      try {
        const resp = await getCareRecordList(this.filters);
        this.records = resp.data.records;
      } catch (err) {
        uni.showToast({ title: "加载失败", icon: "none" });
      }
    },
    onFilter() {
      this.filters.page = 1;
      this.fetchRecords();
    },
    removeRecord(id) {
      uni.showModal({
        title: "提示",
        content: "确认移除此条记录？",
        success: res => {
          if (res.confirm) {
            this.records = this.records.filter(r => r.careServiceId !== id);
          }
        }
      });
    },
    goBack() {
        uni.navigateTo({
          url: `/pages/careMenu/careMenu?customerId=${this.customerId}&name=${encodeURIComponent(this.customerName)}`
        });
      },
    switchTab(tab) {
      this.currentTab = tab;
      if (tab === 'daily') {
        uni.navigateTo({
          url: `/pages/customerProject/customerProject?customerId=${this.customerId}&customerName=${encodeURIComponent(this.customerName)}`
        });
      }
    },
    formatDate(dt) {
      if (!dt) return "";
      const d = new Date(dt);
      return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,"0")}-${String(d.getDate()).padStart(2,"0")} ${String(d.getHours()).padStart(2,"0")}:${String(d.getMinutes()).padStart(2,"0")}`;
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f1f9f9;
}

/* header */
.header-background {
  background-image: url('/static/images/background1.png');
  background-size: cover;
  background-position: center;
  height: 135px;
  padding-top: 20px;
}
.nav-bar {
  display: flex;
  align-items: center;
  padding: 0 16px;
  padding-top: 45px;
}
.back-icon {
  width: 24px; height: 24px;
}
.header-text {
  flex: 1;
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}
.header-search {
  margin-top: 12px;
  padding: 0 16px;
}
/* 搜索框放在背景内，绝对定位 */
.search-bar {
  left: 10%;
  display: flex;
  align-items: center;
  background-color: white;
  padding: 10px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}
.search-icon {
  width: 20px; height: 20px; margin-right: 8px;
}
.search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
}

/* 列表 */
.record-list {
  flex: 1;
  background-color: #f1f9f9;
  padding: 0px 0;
}
.record-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;    /* 顶部对齐 */
  padding: 16px;              /* 增加内边距 */
  background-color: #ffffff;  
  margin: 8px 16px;           /* 卡片式左右留白，上下间距 */
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.record-info {
  flex: 1;
}
.record-left {
  flex: 1;
}
.proj-name {
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 8px;         /* 名称与元数据行的距离 */
}

.meta-row {
  display: flex;
  flex-wrap: wrap;            /* 多项可以换行 */
  font-size: 14px;
  color: #666666;
}

.meta-row text {
  margin-right: 16px;         /* 各项之间留白 */
  margin-bottom: 4px;         /* 换行时项之间留白 */
}

.proj-code,
.time {
  font-size: 14px;
  color: #666;
}
.btn-remove {
  background-color: #e60012;
  color: #ffffff;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 12px;
  line-height: 1;
  flex-shrink: 0;             /* 保持按钮大小不被压缩 */
}

/* 空状态 */
.no-record {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
  font-size: 16px;
}

/* 底部导航 */
.tab-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 56px;
  display: flex;
  background-color: #fff;
  border-top: 1px solid #e5e5e5;
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 12px;
}
.tab-item.active {
  color: #00c3b0;
}
.tab-item image {
  width: 24px; height: 24px;
  margin-bottom: 4px;
}
</style>
